<template>
<transition name="expand">
    <section v-show="show" class="sec">
        <header>
        <div class="header_top">
            <span @click="backHome"></span>
            <p>驴妈妈推荐更多</p>
        </div>
    </header>
    <main>
        <div class="main_1">
            <section class="main_1_head">
                更多品类
            </section>
            <section class="main_1_img">
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656438_64404.png"></a>
                <a href=""><img src="static/imgs/1496656576_98429.png"></a>
                <a href=""><img src="static/imgs/1495777163_45686.jpg"></a>
                <a href=""><img src="static/imgs/1495777005_84935.jpg"></a>
                <a href=""><img src="static/imgs/1499416945_12298.png"></a>
            </section>
        </div>
        <div class="main_1">
            <section class="main_1_head">
                更多品类
            </section>
            <section class="main_1_img">
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
            </section>
        </div>
        <div class="main_1">
            <section class="main_1_head">
                更多品类
            </section>
            <section class="main_1_img">
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656438_64404.png"></a>
                <a href=""><img src="static/imgs/1496656576_98429.png"></a>
                <a href=""><img src="static/imgs/1495777163_45686.jpg"></a>
                <a href=""><img src="static/imgs/1495777005_84935.jpg"></a>
                <a href=""><img src="static/imgs/1499416945_12298.png"></a>
            </section>
        </div>
        <div class="main_1">
            <section class="main_1_head">
                更多品类
            </section>
            <section class="main_1_img">
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
                <a href=""><img src="static/imgs/1496656485_30453.png"></a>
            </section>
        </div>
    </main>
    </section>
</transition>
</template>
<script>
export default {
    methods:{
        backHome(){
            this.$store.commit("changeShow");
            document.body.style.overflow="scroll";
        }
    },
    computed:{
        show(){
            return this.$store.state.show;
        }
    }
}
</script>
<style scoped>
    /*控制页面在最前沿*/
.sec{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    overflow: scroll;
    transform: translate3d(0,0,0);
}
    /*  动画效果*/
.expand-enter,.expand-leave-to{
     transform: translate3d(100%,0,0);
}
.expand-enter-active,.expand-leave-active{
    transition: transform .3s;
}

body{
    font-size: 0.3467rem;
}
      /*  头部的样式*/
header{
    position: fixed;
    width: 100%;
    z-index: 99;
}
.header_top{
    text-align: center;
    height: 1.3333rem;
    line-height: 1.3333rem;
    width: 100%;
    border-bottom: 0.0133rem solid #d5d5d5;
    border-top: 0.0133rem solid #d5d5d5;
    font-size: 0.5333rem;
    background: #f8f8f8;
}
.header_top span::after{
    content: "";
    width: 0.4333rem;
    height: 0.4333rem;
    border-top: 0.0233rem solid #d30775;
    border-right: 0.0233rem solid #d30775;
    transform: rotate(225deg);
    position: absolute;
    top: 0.4rem;
    left: .5rem;
}
        /*  主体的结构样式*/
main{
    position: absolute;
    top: 1.3333rem; 
    width:100%;
    font-size: 0.4rem;
    background: #f8f8f8;
}
        /*  主体第一部分的样式*/
.main_1{
    margin-bottom: .4rem;
}
.main_1_head{
    height: 1.3333rem;
    line-height: 1.3333rem;
    border-bottom: 0.0133rem solid #d5d5d5;
    border-top: 0.0133rem solid #d5d5d5;
    background: #fff;
}
.main_1_head::after{
    content: "";
    width: 0.3333rem;
    height: 0.3333rem;
    border-top: 0.0233rem solid #aaaaaa;
    border-right: 0.0233rem solid #aaaaaa;
    transform: rotate(135deg);
    float: right; 
    margin-right: 1rem;
    margin-top: .4rem;
}
.main_1_head::before{
    content: "";
    height: 1.3333rem;
    width: .1rem;
    background: yellowgreen;
    float: left; 
    margin-right: .5rem;
}
.main_1_img{
     background: #fff; 
     display: flex;
     flex-flow: wrap;
     align-content: center;
}
.main_1_img a{
    width: 33.2%;
    border-right: 0.0133rem solid #d5d5d5;
    border-bottom: 0.0133rem solid #d5d5d5;
}
.main_1_img img{
    display: block;
    width: 100%;   
}
</style>

